import React, {useEffect, useState} from 'react';
import {useAppDispatch} from "@/hooks";
import {
    changeParams,
    deleteHospitalRemoveASync, deleteHospitalSetBatchRemoveAsync,
    getHospitalSetAsync,
    getHospitalSetLockIdAsync,
    useSelectorHosp
} from "@/store/slice/hosp";
import {Table, Switch, Space, Tooltip, Button, Popconfirm, message,Form,Input} from "antd";
import {FormOutlined,DeleteOutlined} from "@ant-design/icons"
import {useSelectorCommon} from "@/store/slice/common";
import HospitalModal from "@/pages/hospital/hospitalSet/components/HospitalModal";

function HospitalSet() {
    const [form] = Form.useForm()
    const dispatch  =useAppDispatch();
    const {hospList} = useSelectorHosp()
    const {pageInfo,loading} = useSelectorCommon()
    //控制modal的显示与隐藏
    const [isModalVisible,setIsModalVisible] = useState<boolean>(false)
    //控制modal的标题
    const [modalTitle,setModalTitle] = useState<string>("添加医院设置")
    //指定修改的内容
    const [hospitalSetInfo,setHospitalSetInfo] = useState<any>(null)
    //指定为id
    const [selectorById,setSelectorById] = useState<any>(-1)
    //批量删除
    const [selectedRowKeys,setSelectorRowKeys] = useState<React.Key[]>([])
    //批量加载中
    const [deLoading,setDeLoading] = useState<boolean>(false)
    useEffect(()=>{
        dispatch(getHospitalSetAsync(1,5));
        return ()=>{
            dispatch(changeParams({}))
        }
    },[])
    return (
        <div>
            <Space style={{marginBottom: 16}}>
                <Button type={"primary"} onClick={()=>{
                    setHospitalSetInfo(null)
                    setModalTitle("添加医院设置");
                    setIsModalVisible(true);
                }}>添加医院设置</Button>
                <Button type="primary" onClick={async ()=>{
                    setDeLoading(true)
                    await dispatch(deleteHospitalSetBatchRemoveAsync(selectedRowKeys))
                    setSelectorRowKeys([]);
                    setDeLoading(false)
                    message.success("批量删除成功")
                }} disabled={selectedRowKeys.length === 0} loading={deLoading}>
                    批量删除{selectedRowKeys.length}条
                </Button>
                <Form
                    form={form}
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={(values)=>{
                        dispatch(changeParams(values))
                        dispatch(getHospitalSetAsync(1,5))
                    }}
                    autoComplete="off"
                    layout={"inline"}
                >
                    <Form.Item
                        name="hosname"
                    >
                        <Input placeholder={"请输入医院信息"} />
                    </Form.Item>

                    <Form.Item
                        name="hoscode"
                    >
                        <Input placeholder={"请输入医院编码"} />
                    </Form.Item>
                    <Form.Item>
                        <Space>
                            <Button type="primary" htmlType="submit">
                                搜索
                            </Button>
                            <Button onClick={()=>{
                                form.resetFields()
                                dispatch(changeParams({}))
                                dispatch(getHospitalSetAsync(1,5))
                            }} htmlType="button">
                                重置
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Space>
            <Table
                rowSelection={{
                    selectedRowKeys,
                    onChange(newSelectedRowKeys: React.Key[]){
                        setSelectorRowKeys(newSelectedRowKeys)
                    }
                }}
                loading={loading}
                pagination={{
                    ...pageInfo,
                    onChange(page,pageSize){
                        dispatch(getHospitalSetAsync(page,pageSize))
                    }
                }}
                rowKey={"id"}
                //增加表格边框
                bordered={true}
                // rowSelection={rowSelection}
                scroll={{x:1400}} // 滚动条宽度
                columns={[
                    {
                        title:"序号",
                        width:70,
                        align:"center",
                        render(value,rows,index){
                            return (pageInfo.current-1)*pageInfo.pageSize + index+1
                        }
                    },{
                        title:"医院名称",
                        align:"center",
                        width:"200",
                        ellipsis:true,//超过宽度自动省略
                        dataIndex:"hosname"
                    },{
                        title:"医院编号",
                        align:"center",
                        dataIndex:"hoscode"
                    },{
                        title:"是否锁定",
                        align:"center",
                        dataIndex:"status",
                        render(status,rows){
                            // console.log(rows)
                            return(
                                <Switch checked={status===0} onChange={()=>{
                                        dispatch(getHospitalSetLockIdAsync(rows.id,status))
                                }} />
                            )
                        }
                    },{
                        title:"api基础地址",
                        align:"center",
                        dataIndex:"apiUrl"
                    },{
                        title:"密钥",
                        align:"center",
                        width:150,
                        ellipsis:true,
                        dataIndex:"signKey"
                    },{
                        title:"联系人姓名",
                        align:"center",
                        dataIndex:"contactsName"
                    },{
                        title:"联系人手机",
                        align:"center",
                        dataIndex:"contactsPhone"
                    }, {
                        title:"添加时间",
                        align:"center",
                        dataIndex:"createTime"
                    },{
                        title:"更新时间",
                        align:"center",
                        dataIndex:"updateTime"
                    },{
                        title:"操作",
                        align:"center",
                        // dataIndex:"hosname",
                        fixed:"right", // 右浮动
                        render(rows){
                            return(
                                <Space>
                                    <Tooltip title="编辑">
                                        <Button onClick={()=>{
                                            // console.log(rows)
                                            setModalTitle("修改医院设置");
                                            setHospitalSetInfo({...rows});
                                            setIsModalVisible(true);
                                        }} type="primary" shape="circle" icon={<FormOutlined />} />
                                    </Tooltip>

                                    <Tooltip title="删除">

                                        <Popconfirm
                                            visible={rows.id === selectorById}
                                            placement="topRight"
                                            title={"是否要删除"+ rows.hosname+"信息"}
                                            onConfirm={async ()=>{
                                                try {
                                                    await dispatch(deleteHospitalRemoveASync(rows.id))
                                                    setSelectorById(-1)
                                                    message.success("删除"+rows.hosname +"成功")
                                                }catch (err){
                                                    setSelectorById(-1)
                                                }
                                                //     dispatch(deleteHospitalRemoveASync(rows.id)).then(()=>{
                                                //         message.success("删除"+rows.hosname +"成功")
                                                //     }).catch()

                                            }}
                                            onCancel={()=>{
                                                setSelectorById(-1)
                                            }}
                                            okText="是"
                                            cancelText="否"
                                        >
                                            <Button onClick={()=>{
                                               setSelectorById(rows.id)
                                            }} danger type="primary" shape="circle" icon={<DeleteOutlined />}/>
                                        </Popconfirm>
                                    </Tooltip>
                                </Space>
                            )
                        }
                    }
                ]}
                dataSource={hospList} />

            <HospitalModal hospitalSetInfo={hospitalSetInfo}  modelTitle={modalTitle} setIsModalVisible={setIsModalVisible} isModalVisible={isModalVisible} ></HospitalModal>
        </div>
    );
}

export default HospitalSet;